<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.username"
        placeholder="用户名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter="handleFilter"
      />
      <el-input
        v-model="listQuery.email"
        placeholder="邮箱"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter="handleFilter"
      />
      <el-select v-model="listQuery.status" placeholder="状态" clearable style="width: 120px" class="filter-item">
        <el-option v-for="item in statusOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="Search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
        <template #default="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="头像" width="80px" align="center">
        <template #default="{row}">
          <el-avatar :size="40" :src="row.avatar" />
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="150px" align="center">
        <template #default="{row}">
          <span>{{ row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="200px" align="center">
        <template #default="{row}">
          <span>{{ row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150px" align="center">
        <template #default="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" width="120px" align="center">
        <template #default="{row}">
          <el-tag :type="getLevelType(row.level)">{{ getLevelName(row.level) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100px" align="center">
        <template #default="{row}">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'">
            {{ row.status === 1 ? '正常' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="文章数" width="80px" align="center">
        <template #default="{row}">
          <span>{{ row.articleCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="粉丝数" width="80px" align="center">
        <template #default="{row}">
          <span>{{ row.followersCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" width="150px" align="center">
        <template #default="{row}">
          <span>{{ parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template #default="{row,$index}">
          <el-button type="primary" size="small" @click="handleDetail(row)">
            详情
          </el-button>
          <el-button v-if="row.status!==0" size="small" type="warning" @click="handleModifyStatus(row, 0)">
            禁用
          </el-button>
          <el-button v-if="row.status!==1" size="small" type="success" @click="handleModifyStatus(row, 1)">
            启用
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.pageSize" @pagination="getList" />

    <!-- 会员详情对话框 -->
    <el-dialog title="会员详情" v-model="detailDialogVisible" width="800px">
      <div v-if="currentMember">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="member-avatar">
              <el-avatar :size="120" :src="currentMember.avatar" />
            </div>
          </el-col>
          <el-col :span="16">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="用户名">{{ currentMember.username }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ currentMember.email }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ currentMember.phone }}</el-descriptions-item>
              <el-descriptions-item label="会员等级">{{ getLevelName(currentMember.level) }}</el-descriptions-item>
              <el-descriptions-item label="文章数量">{{ currentMember.articleCount }}</el-descriptions-item>
              <el-descriptions-item label="粉丝数量">{{ currentMember.followersCount }}</el-descriptions-item>
              <el-descriptions-item label="关注数量">{{ currentMember.followingCount }}</el-descriptions-item>
              <el-descriptions-item label="获赞数量">{{ currentMember.likesCount }}</el-descriptions-item>
              <el-descriptions-item label="注册时间" :span="2">{{ parseTime(currentMember.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-descriptions-item>
              <el-descriptions-item label="个人简介" :span="2">{{ currentMember.bio || '暂无简介' }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination/index.vue'

const tableKey = ref(0)
const list = ref([])
const total = ref(0)
const listLoading = ref(true)
const detailDialogVisible = ref(false)
const currentMember = ref(null)

const listQuery = reactive({
  current: 1,
  pageSize: 20,
  username: undefined,
  email: undefined,
  status: undefined
})

const statusOptions = [
  { key: 1, display_name: '正常' },
  { key: 0, display_name: '禁用' }
]

const levelMap = {
  1: { name: '普通会员', type: '' },
  2: { name: '铜牌会员', type: 'warning' },
  3: { name: '银牌会员', type: 'info' },
  4: { name: '金牌会员', type: 'success' },
  5: { name: 'VIP会员', type: 'danger' }
}

onMounted(() => {
  getList()
})

function getList() {
  listLoading.value = true
  // 模拟数据
  setTimeout(() => {
    list.value = [
      {
        id: 1,
        username: 'frontend_dev',
        email: 'frontend@example.com',
        phone: '13800138001',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        level: 4,
        status: 1,
        articleCount: 25,
        followersCount: 1200,
        followingCount: 300,
        likesCount: 5600,
        bio: '专注前端开发，热爱技术分享',
        createTime: new Date('2023-01-15')
      },
      {
        id: 2,
        username: 'backend_master',
        email: 'backend@example.com',
        phone: '13800138002',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        level: 5,
        status: 1,
        articleCount: 45,
        followersCount: 2800,
        followingCount: 150,
        likesCount: 12000,
        bio: '后端架构师，10年开发经验',
        createTime: new Date('2022-08-20')
      },
      {
        id: 3,
        username: 'mobile_dev',
        email: 'mobile@example.com',
        phone: '13800138003',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        level: 2,
        status: 1,
        articleCount: 8,
        followersCount: 320,
        followingCount: 500,
        likesCount: 890,
        bio: '移动端开发爱好者',
        createTime: new Date('2023-06-10')
      },
      {
        id: 4,
        username: 'ai_researcher',
        email: 'ai@example.com',
        phone: '13800138004',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        level: 3,
        status: 0,
        articleCount: 15,
        followersCount: 680,
        followingCount: 200,
        likesCount: 2300,
        bio: 'AI研究员，机器学习专家',
        createTime: new Date('2023-03-25')
      }
    ]
    total.value = 4
    listLoading.value = false
  }, 1000)
}

function handleFilter() {
  listQuery.current = 1
  getList()
}

function getLevelName(level) {
  return levelMap[level]?.name || '未知等级'
}

function getLevelType(level) {
  return levelMap[level]?.type || ''
}

function handleModifyStatus(row, status) {
  const statusText = status === 1 ? '启用' : '禁用'
  ElMessageBox.confirm(`确定要${statusText}该会员吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    row.status = status
    ElMessage({
      message: `${statusText}成功`,
      type: 'success'
    })
  })
}

function handleDetail(row) {
  currentMember.value = row
  detailDialogVisible.value = true
}

function handleDelete(row, index) {
  ElMessageBox.confirm('此操作将永久删除该会员, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    list.value.splice(index, 1)
    ElMessage({
      type: 'success',
      message: '删除成功!'
    })
  })
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  padding-bottom: 10px;
  
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

.member-avatar {
  text-align: center;
  padding: 20px 0;
}
</style>